<template>
	<view class="login-index">
	    <view class="login-index-welcome">
	      <h1>您好,</h1>
	      <h1>欢迎来到淘小建建筑平台</h1>
	    </view>
	    <view class="login-index-context">
			<view class="login-index-context-input" align="left">
			  <p style="font-size: 0.5rem;padding: 0.5rem 0;color: #999999">未注册的手机号验证后自动创建账户</p>
			</view>
	      <view>
	        <input-box
			style="background-color:#FFFFFF ;"
			leftText="+86"
			ref="input1"
			v-model="form.loginName"
			:verification="['isNull','isPhoneNum']" 
			:verificationTip="['手机号码不能为空','请输入正确的手机号']" 
			placeholder="请输入手机号码"
			 maBtm="10" 
			 maxLength="11"
			 ></input-box>
	      </view>
	      <view style="padding: 1rem 0;">
	        <van-button type="primary" size="large" style="border-radius: 0.5rem" @click="phoneCode">获取短信验证码</van-button>
	      </view>
	      <view align="left">
			<router-link style="color: dodgerblue;font-size: 0.7rem" :to="{path:'/pages/login/password_login'}">密码登录</router-link>
	        <view style="float: right;">
	<!--          <img src="@/image/wv.jpg" style="width: 1rem;height: 1rem;display: inline-block">-->
	          <span style="display: inline-block;color: black;font-size: 0.7rem">微信登录</span>
	        </view>
	      </view>
	      <view class="login-index-context-bottom">
	        <p>登录即表明同意<span>《用户协议》</span>和<span>《隐私协议》</span></p>
	      </view>
	    </view>
	  </view>
</template>

<script>
	
	import inputBox from '@/components/input-box/input-box';
	
	export default {
		data() {
			return {
				pattern: /^1[35789]\d{9}$/,
				form:{
					loginName:undefined
				},
				loginError:"",
			};
		},
		components:{
			inputBox
		},
		methods: {
			async phoneCode(){
				if(this.$refs.input1.getValue()){
					const res = await this.$myRequest({
						url:'/api/login/getPhoneCode',
						method:'post',
						data:this.form,
					});
					// console.log(JSON.stringify(res.data.code));
					uni.navigateTo({
						url:'/pages/login/verification_code?loginName='+this.form.loginName+"&code=642759"
					})
				}
			},
		}
	}
</script>

<style>
.login-index{
    padding: 1rem;
    color: black;
  }
  body{
    background-color: #f7f8fa;
  }
  .login-index-welcome{
    text-align: left;
    padding-top: 4rem;
  }
  .login-index-welcome h1{
    font-size: 1.5rem;
    padding: 0.5rem;
  }
  .login-index-context-input{
    margin-top: 2rem;
  }
  .login-index-context-bottom{
    position: fixed;
    bottom: 1rem;
  }
  .login-index-context-bottom p,span{
    font-size: 0.5rem
  }
  .login-index-context-bottom span{
    color: dodgerblue;
  }
</style>
